<template>
  <div class="box" :style="`visibility:${volumeFlag}`">
    <div class="volumebox">
      <div class="curr" :style="`height:${volumeParsentHeight}`"></div>
      <span
        class="volumeBtn"
        @mousedown.prevent="VolumeControlFlag"
        :style="`top:${volumeParsentBtnTop}`"
      ></span>
    </div>
  </div>
  <a href="javascript:;" class="icon volume" @mouseup.stop="show"></a>
</template>

<script>
import { useStore } from "vuex";
import { computed, watch, toRef } from "vue";
import bodyMouseup from "@/baseFnMixin/bodyMouseupJudge.js";
export default {
  name: "SongVolumeOrder ",
  setup() {
    const store = useStore();
    // 1.  进度条按钮被按下时触发
    function VolumeControlFlag(e) {
      // 将按下的状态传递给vuex
      store.commit("SongVolume/changeVolumeBtnFlag", true);
      //  将按下时的Y轴值,保存
      store.commit("SongVolume/changeClientY", e.clientY);
    }
    // 2. 获取进度条高度
    const volumeParsentHeight = computed(
      () => store.getters["SongVolume/volumeParsentHeight"]
    );
    // 3. 获取进度条按钮的top值
    const volumeParsentBtnTop = computed(
      () => store.getters["SongVolume/volumeParsentBtnTop"]
    );
    // 4. 鼠标松开时
    //  获取进度条按钮是否处于按下的状态
    const volumeBtnFlag = toRef(store.state.SongVolume, "volumeBtnFlag");
    const bodymouseup = bodyMouseup();
    //  5. 监测进度条按钮是否处于按下的状态
    watch(volumeBtnFlag, (value) => {
      if (value) {
        //  当进度条按钮的状态为true时,表示处于按下的状态
        const body = document.body;
        body.onmouseup = null;
        //  给body绑定松开时的事件
        body.onmouseup = function () {
          //  关闭进度条高度随鼠标移动更新的功能
          store.commit("SongVolume/changeVolumeBtnFlag", false);
        };
      } else {
        //  当进度条按钮的状态为false时,表示处于松开的状态
        //  开启判断鼠标松开时，是否在底部区域来决定是否隐藏音量区域
        // store.commit("SongVolume/mouseUpchangeVolumeShow");
        bodymouseup();
      }
    });
    // 6. 隐藏与显示的class样式
    const volumeFlag = computed(() =>
      store.state.SongVolume.volumeShow ? "visible" : "hidden"
    );
    // 7. 点击音量隐藏与显示的开关按钮
    function show() {
      if (store.state.SongVolume.volumeShow) {
        //  当音量处于显示时,点击关的按钮
        const body = document.body;
        //  解绑事件, 此事件是用来判定松开时,是否在底部区域来决定是否隐藏音量区域
        if (!store.state.SongList.flag) {
          body.onmouseup = null;
        }

        //  将音量区域的状态改为false(隐藏)
        store.commit("SongVolume/changeVolumeShow", !store.state.SongVolume.volumeShow);
      } else {
        //  当音量处于隐藏时,点击 开的按钮
        //  将音量区域的状态改为true(显示)
        store.commit("SongVolume/changeVolumeShow", !store.state.SongVolume.volumeShow);
        //  开启判断鼠标松开时，是否在底部区域来决定是否隐藏音量区域
        // store.commit("SongVolume/mouseUpchangeVolumeShow");
        bodymouseup();
      }
    }
    return {
      VolumeControlFlag,
      volumeParsentHeight,
      volumeParsentBtnTop,
      volumeFlag,
      show,
    };
  },
};
</script>

<style scoped lang="less">
.box {
  position: absolute;
  top: -113px;
  left: 9px;
  width: 32px;
  height: 113px;
  background: url("../../../../common/images/playbar.png") no-repeat 0 -503px;
  z-index: 11;
}
.volume {
  background: url("../../../../common/images/playbar.png") no-repeat -2px -248px;
  &:hover {
    background-position: -31px -248px;
  }
}
.volumebox {
  position: absolute;
  padding: 4px 0;
  top: 7px;
  left: 14px;
  width: 4px;
  height: 93px;
}
.curr {
  position: absolute;
  bottom: 4px;
  width: 100%;
  height: 93px;
  background: url("../../../../common/images/playbar.png") no-repeat -40px bottom;
}
.volumeBtn {
  position: absolute;
  top: 0px;
  left: -7px;
  width: 18px;
  height: 20px;
  background: url("../../../../common/images/iconall.png") no-repeat -40px -250px;
}
</style>
